<!-- 内容 右侧 -->
<template>
  <div class="box">
    <header class="content-right-header" id="change">
      <ul class="content-right-list">
        <li class="content-right-item" :class="{'active':changeFlag}">
          <a href="javascript:;" class="left-nav-list">
            <span class="left-nav-item item-active" @click="toHot">热门游记</span>
            <span class="left-nav-item choose" @click="openFilterWin">
              <i class="fa fa-list" aria-hidden="true"></i>筛选
            </span>
          </a>
        </li>
        <li class="content-right-item" :class="{'active':!changeFlag}">
          <a href="javascript:;" class="left-nav-list" @click="toNew">
            <span class="item-active">最新发表</span>
          </a>
        </li>
      </ul>

      <a href="#" class="header-right">
        <span class="header-item">
          <i class="fa fa-pencil-square-o" aria-hidden="true"></i>
          写游记
        </span>
      </a>
    </header>

    <ul class="int-box animated fadeIn" v-if="changeFlag">
      <li class="int-list" v-for="(item,index) in homeList.slice((currentPage-1)*pageSize,currentPage*pageSize)" :key="index">
        <a href="#" class="int-item">
          <div class="int-item-left-img">
            <img
              :src="item.img"
              width="220px"
              height="150px"
            />
          </div>
          <div class="int-right">
            <p class="int-title">{{item.title}}</p>

            <p class="int-sub">
              {{item.introduce}}
            </p>

            <div class="int-button">
              <div class="int-place-box">
                <span class="int-place-item">
                  <i
                    class="fa fa-map-marker"
                    aria-hidden="true"
                    style="color:#999;font-size:18px;margin-right:5px"
                  ></i>
                  <span class="place-inf" style="margin-right:10px">
                    {{item.place}}，by
                    <img
                      :src="item.authorPic"
                      width="16px"
                      height="16px"
                      style="border-radius:50%;margin-left:10px;margin-right:5px"
                    />
                    <span style="color:#ff9d00" class="autname">{{item.authorName}}</span>
                  </span>
                </span>

                <span class="int-views">
                  <i
                    class="fa fa-eye"
                    aria-hidden="true"
                    style="color:#999;font-size:16px;margin-right:1px"
                  ></i>
                  <span>{{item.allViews}}/{{item.todayViews}}</span>
                </span>
              </div>

              <div class="int-agree">
                <span>{{item.fab}}</span>
                <a href="#">
                  <img src="@/assets/ding.png" width="38px" height="33px" />
                </a>
              </div>
            </div>
          </div>
        </a>
      </li>
      <li class="pag-unit">
        <span class="total-inf">共{{Math.ceil(homeList.length/pageSize)}}页 / {{homeList.length}}条</span>
        <el-pagination
          :page-size="pageSize"
          :current-page="currentPage"
          :pager-count=9
          layout="prev, pager, next"
          :total=homeList.length
          @size-change="handleSizeChange" 
          @current-change="handleCurrentChange"
          >
        </el-pagination>
      </li>
    </ul>

    <ul class="int-box" v-else>
      <li class="int-list animated fadeIn" v-for="(item1,index1) in homeNewList.slice((currentPage-1)*pageSize,currentPage*pageSize)" :key="index1">
        <a href="#" class="int-item">
          <div class="int-item-left-img">
            <img
              :src="item1.img"
              width="220px"
              height="150px"
            />
          </div>
          <div class="int-right">
            <p class="int-title">{{item1.title}}</p>

            <p class="int-sub">
              {{item1.introduce}}
            </p>

            <div class="int-button">
              <div class="int-place-box">
                <span class="int-place-item">
                  <i
                    class="fa fa-map-marker"
                    aria-hidden="true"
                    style="color:#999;font-size:18px;margin-right:5px"
                  ></i>
                  <span class="place-inf" style="margin-right:10px">
                    {{item1.place}}，by
                    <img
                      :src="item1.authorPic"
                      width="16px"
                      height="16px"
                      style="border-radius:50%;margin-left:10px;margin-right:5px"
                    />
                    <span style="color:#ff9d00" class="autname">{{item1.authorName}}</span>
                  </span>
                </span>

                <span class="int-views">
                  <i
                    class="fa fa-eye"
                    aria-hidden="true"
                    style="color:#999;font-size:16px;margin-right:1px"
                  ></i>
                  <span>{{item1.allViews}}/{{item1.todayViews}}</span>
                </span>
              </div>

              <div class="int-agree">
                <span>{{item1.fab}}</span>
                <a href="#">
                  <img src="@/assets/ding.png" width="38px" height="33px" />
                </a>
              </div>
            </div>
          </div>
        </a>
      </li>
      <li class="pag-unit">
        <span class="total-inf">共{{Math.ceil(homeNewList.length/pageSize)}}页 / {{homeNewList.length}}条</span>
        <el-pagination
          :page-size="pageSize"
          :current-page="currentPage"
          :pager-count=9
          layout="prev, pager, next"
          :total=homeNewList.length
          @size-change="handleSizeChange" 
          @current-change="handleCurrentChange"
          >
        </el-pagination>
      </li>
    </ul>
  </div>
</template>

<script>
import FilterWindow from "@/components/Home/FilterWindow";
import vuex, { mapState } from 'vuex'
export default {
  data() {
    return {
      changeFlag: true,
      test: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
      pageSize:10, 
      currentPage:1,
    };
  },

  components: {
    FilterWindow
  },
  computed:{
    ...mapState(['homeList','homeNewList'])
  },
  mounted(){
    this.init()
  },
  methods: {
    toHot() {
      this.changeFlag = true;
      this.currentPage = 1;
    },
    toNew() {
      this.changeFlag = false;
      this.currentPage = 1;
    },
    openFilterWin() {
      alert("筛什么筛？不准筛选！！");
    },
    init(){
      this.$store.dispatch('reqHomeData')
      this.$store.dispatch('reqHomeNewData')
    },
    handleSizeChange(val) {
      // 改变每页显示的条数 
      this.PageSize=val
      // 注意：在改变每页显示的条数时，要将页码显示到第一页
      this.currentPage=1
    },
    // 显示第几页
    handleCurrentChange(val) {
      // 改变默认的页数
      this.currentPage=val
      document.getElementById("change").scrollIntoView({ block: 'start', behavior: 'smooth' })

    },
  }
};
</script>
<style scoped lang="stylus" ref="stylesheet/stylus">
.box {
  width: 700px;

  .content-right-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #333;
    border-bottom: 1px solid #e5e5e5;

    .content-right-list {
      display: flex;

      .active {
        color: #ff9d00;
        border-bottom: 3px solid #ff9d00;
      }

      .content-right-item {
        padding: 15px 0;

        .left-nav-list {
          font-size: 18px;
          display: block;
          width: 160px;
          text-align: center;

          .item-active {
            &:hover {
              color: #ff9d00;
            }
          }

          .choose {
            border: 1px solid #e5e5e5;
            padding: 3px 7px;
            font-size: 12px;
            color: #666666;

            i {
              margin-right: 5px;
            }

            &:hover {
              color: #ffffff;
              background-color: #ff9d00;
              border: 1px solid transparent;
            }
          }
        }
      }
    }

    .header-right {
      display: block;
      background-color: #ff9d00;
      color: #ffffff;
      font-size: 16px;
      line-height: 36px;
      border-radius: 4px;
      text-align: center;
      width: 140px;

      &:hover {
        background-color: #FF8C00;
      }
    }
  }

  .int-box {
    display: flex;
    flex-direction: column;
    width: 740px;
    margin-left: -20px;
    margin-top: 20px;

    .int-list {
      padding: 15px 20px;

      &:hover {
        background-color: #efefef;

        .int-title {
          color: #ff9d00;
        }
      }

      .int-item {
        display: flex;
        justify-content: space-between;

        .int-right {
          font-size: 14px;
          color: #666;
          width: 455px;

          .int-title {
            // color #333
            font-size: 18px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }

          .int-sub {
            text-overflow: -o-ellipsis-lastline;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            margin: 10px 0;
          }

          .int-button {
            display: flex;
            justify-content: space-between;
            padding-top: 10px;
            align-items: center;

            .int-place-box {
              display: flex;

              .int-place-item {
                display: flex;
                align-items: center;

                .place-inf {
                  display: flex;
                  align-items: center;

                  .autname {
                    &:hover {
                      text-decoration: underline;
                    }
                  }
                }
              }
            }

            .int-views {
              color: #999;
            }

            .int-agree {
              display: flex;
              align-items: center;

              span {
                margin-right: 10px;
                color: #ff9d00;
              }
            }
          }
        }
      }
    }
    .pag-unit{
      display flex
      justify-content flex-end
      align-items center
      .total-inf{
        padding-top 20px
        color #999999
        margin-right 10px
        font-size 12px
      }
      >>> .el-pagination{
            margin 20px 0 0px 0
      }
      >>> .btn-prev,>>> .btn-next{
            background-color #ff9d00
            color #ffffff
            border-radius 5px
      }
      >>> .el-icon-arrow-left::before,>>> .el-icon-arrow-right::before{
            content:''
      }
      >>> .el-icon-arrow-left::after{
            content:'<<上一页'
            font-size 12px
      }
      >>> .el-icon-arrow-right::after{
            content:'下一页>>'
      }
      >>> .el-icon-more{
           background-color transparent
      }
      >>> .el-pager li{
        min-width 27px
      }
      >>>.el-pager li:hover{
            color #666
            background-color #efefef
      }
      >>> .el-pager{
            .number{
              background-color transparent
              color #666
              margin 0 3px
              font-size 12px
              &:hover{
                background-color #efefef
                border-radius 5px
                color:#666
              }
            }
            .active{
              background-color #ff9d00
              color #fff
              border-radius 5px
              &:hover{
                background-color #ff9d00
                color #fff
                }
            }
      }
    }
  }
}
</style>